import BaseView from "../baseview.js";

export default class AddstudentView extends BaseView{
   
      constructor(id){
          super(id);
          super.init();
          //挂在数据
          this.mouted();
      }

    render(){
        $("#show_content").html(
            `<div style='margin:50px auto'>
            <form class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                    <input id="studentName" type="text" name="name" placeholder="请输入姓名"   autocomplete="off" class="layui-input">
                </div> 
            </div>
      <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-inline">
            <input type="text" id="studentAge" placeholder="请输入年龄"  autocomplete="off" class="layui-input">
            </div>
        </div>
      <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
          <input type="radio" id="M" name="sex" checked   value="男" title="男">
          <input type="radio" id='F' name="sex"   value="女" title="女">
        </div>
      </div>
      <div class="layui-form-item">
            <label class="layui-form-label">所在班级</label>
            <div class="layui-input-inline">
            <select id="classes" name="interest" lay-filter="aihao">
              
             </select>
            </div>
        </div>
        <div class="layui-form-item" style='margin-left:100px'>
        <!--上传图片 -->
        <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1">上传图片</button>
        <div class="layui-upload-list">
          <img class="layui-upload-img" id="demo1">
          <p id="demoText"></p>
        </div>
        <div style="width: 95px;">
          <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
            <div class="layui-progress-bar" lay-percent=""></div>
          </div>
        </div>
      </div> 
      </div>  
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button id='addBtn' type='button' class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
          <button id='backBtn' type='button' class="layui-btn" lay-submit lay-filter="formDemo">返回</button>
        </div>
      </div>
    </form>
    </div>
            `
       )   
    }

    addlayuiJs(){
        $("#addscript").html(
        `<script>
        var myform = null;
        layui.use(['upload', 'element', 'layer','form'], function(){
          myform = layui.form;
          var $ = layui.jquery
          ,upload = layui.upload
          ,element = layui.element
          ,layer = layui.layer;
          //常规使用 - 普通图片上传
          var uploadInst = upload.render({
            elem: '#test1'
            ,auto:false
            ,choose:function(obj){
              //预读本地文件示例，不支持ie8
              obj.preview(function(index, file, result){
                $('#demo1').attr('src', result); //图片链接（base64）
              });
            }
            ,data:{
              name:()=>$("#studentName").val(),
              age:()=>$("#studentAge").val(), 
              gender:()=>$("input[type='radio']:checked").val(),
              classid:()=>$("#classes").val()
            }
            ,url: "/api/student/addstudent" //改成您自己的上传接口
            ,bindAction:"#addBtn"
            ,done: function(res){
              //如果上传失败
              if(res.code > 0){
                return layer.msg('上传失败');
              }else{
                //上传成功的一些操作
                alert(res.msg);
                window.location.hash="#/main/studentList"        
              }
              
              $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
              //演示失败状态，并实现重传
              var demoText = $('#demoText');
              demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
              demoText.find('.demo-reload').on('click', function(){
                uploadInst.upload();
              });
            }
            //进度条
            ,progress: function(n, elem, e){
              element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
              if(n == 100){
                layer.msg('上传完毕', {icon: 1});
              }
            }
          });
          



        });
        </script>`
        )}
      
        goback(){
          window.location.hash="#/main/studentList";
        }
        handle(){
             //返回按钮
             $("#backBtn").click(()=>{
                 this.goback();
             });

        }
        //挂载数据
        mouted(){
          $.ajax({
             type:"get",
             url:"/api/classes/getAllClasses",
             dataType:"json",
             success(data){
                console.log(data);
                //拼接option
                let str="";
                 $.each(data,(i,classObj)=>{
                  str+=`<option value='${classObj._id}'>${classObj.name}</option>`;
                 });
                 $("#classes").html(str);
                 //重新渲染
                 myform.render();
             }
          })
        }
}